<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./kuwan.css">
    <script src="./js/jq.js"></script>
</head>

<body>
    <div class="wrap">
        <!-- 顶部 -->
        <div class="head">

            <img src="./img/logonew.png" alt="" class="logo">

            <a href="#">
                首页
            </a>
            <a href="#">
                酷玩
            </a>
            <a href="#">
                导购
            </a>
            <a href="#">
                报告
            </a>

            <button class="zhuce">
                注册
            </button>

            <img src="./css/img/search.png" alt="" class="search">



        </div>

        <div class="tittle">
            发现酷玩
        </div>


        <div class="kuwan">
            <div class="kw-tittle">
                <div class="new">
                    最新
                </div>

                <div class="hot">
                    最热
                </div>

                <div class="pinlei">
                    品类
                </div>
            </div>


            <div class="kw-box">
                <!-- <div class="new1">

                </div> -->

            </div>
            <div class="more">
                <img src="./css/img/more.png" alt="">
                点击加载更多
            </div>
        </div>

        <!-- 底部 -->
        <div class="foot">
            <div class="footer">
                <div class="erweima">
                    <img src="./img/code.png" alt="">
                </div>

                <div class="jiguo">
                    <img src="./img/logoImg.jpg" alt="">
                    <p>
                        全球酷玩试用导购平台酷·新奇·好玩·品质
                    </p>

                    <p>
                        微信添加"JguoJguo"
                        <span>
                            获取我们的服务。
                        </span>
                    </p>
                </div>

                <div>
                    <dl>
                        <dt>
                            免费试用
                        </dt>
                        <dd>
                            试用流程
                        </dd>
                        <dd>
                            如何提高成功率
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            友情链接
                        </dt>
                        <dd>
                            智东西
                            <span>
                                WEIBUSI
                            </span>
                        </dd>
                        <dd>
                            搜狐IT <span>
                                腾讯科技
                            </span>
                        </dd>
                        <dd>
                            搜狐数码 <span>
                                凤凰科技
                            </span>
                        </dd>
                        <dd>
                            凤凰数码 <span>
                                PConline
                            </span>
                        </dd>
                        <dd>
                            泡泡网 <span>
                                3W咖啡
                            </span>
                        </dd>
                        <dd>
                            ZUK社区 <span>
                                亿觅emie
                            </span>
                        </dd>
                        <dd>
                            极客公园 <span>易迅易启玩</span>
                        </dd>
                        <dd>
                            果库
                        </dd>
                    </dl>

                    <dl>
                        <dt>
                            购买攻略
                        </dt>
                        <dd>
                            美亚海淘教程
                        </dd>
                        <dd>
                            日亚海淘教程
                        </dd>
                        <dd>
                            海淘转运攻略
                        </dd>
                        <dd>
                            kickstarter 众筹购买攻略
                        </dd>
                        <dd>
                            indiegogo 众筹购买攻略
                        </dd>


                    </dl>

                    <dl>
                        <dt>
                            厂商合作
                        </dt>
                        <dd>
                            关于极果
                        </dd>
                        <dd>
                            联系我们
                        </dd>
                        <dd>
                            商务合作：BD@jiguo.com
                        </dd>
                        <dd>
                            CEO邮箱：CEO@jiguo.com
                        </dd>



                    </dl>
                </div>

                <div class="last">
                    ©2016 极果版权所有
                </div>
            </div>
        </div>

        <script>

            $(function () {
                var kwBox = $('.kw-box');
                $.ajax({
                    url: 'http://localhost:3000/play/new', type: 'get', success(res) {
                        console.log(res);
                        for (var i = 0; i < res.length; i++) {
                            for (var j = 0; j < res[i].length; j++) {
                                var div = $("<div></div>");
                                div.attr('class', 'new1');
                                kwBox.append(div);
                                var img = $('<img/>');
                                img.attr('src', res[i][j].img);
                                div.append(img);


                                var text = $("<div></div>");
                                text.attr('class', 'text')
                                text.html(res[i][j].text);
                                div.append(text);
                                var pinglun = $('<span></span>');
                                pinglun.attr('class', 'pinglun');
                                pinglun.html(res[i][j].description);
                                div.append(pinglun);



                                var span1 = $("<span></span>");
                                span1.attr('class', 'span1')
                                var img1 = $('<img/>');
                                img1.attr('src', './css/img/xin.png');
                                var span2 = $("<span></span>");
                                span2.attr('class', 'span2');
                                var img2 = $('<img/>');
                                img2.attr('src', './css/img/zan.png');
                                span1.html(img1);
                                span1.append(res[i][j].like);
                                div.append(span1)
                                span2.html(img2);
                                span2.append(res[i][j].words);
                                div.append(span2);
                                var span3 = $("<span></span>");
                                span3.attr('class', 'price');
                                span3.html(res[i][j].price);
                                div.append(span3)
                            }

                        }






                    }
                })

                $.ajax({
                    url: 'http://localhost:3000/play/hot', type: 'get', success(res) {
                        console.log(res);
                        for (var i = 0; i < res.length; i++) {
                            for (var j = 0; j < res[i].length; j++) {
                                var div = $("<div></div>");
                                div.attr('class', 'hot1');
                                kwBox.append(div);
                                var img = $('<img/>');
                                img.attr('src', res[i][j].img);
                                div.append(img);
                                var text = $("<div></div>");
                                text.attr('class', 'text')
                                text.html(res[i][j].text);
                                div.append(text);
                                var pinglun = $('<span></span>');
                                pinglun.attr('class', 'pinglun');
                                pinglun.html(res[i][j].description);
                                div.append(pinglun);
                                var span1 = $("<span></span>");
                                span1.attr('class', 'span1')
                                var img1 = $('<img/>');
                                img1.attr('src', './css/img/xin.png');
                                var span2 = $("<span></span>");
                                span2.attr('class', 'span2');
                                var img2 = $('<img/>');
                                img2.attr('src', './css/img/zan.png');
                                span1.html(img1);
                                span1.append(res[i][j].like);
                                div.append(span1)
                                span2.html(img2);
                                span2.append(res[i][j].words);
                                div.append(span2);
                                var span3 = $("<span></span>");
                                span3.attr('class', 'price');
                                span3.html(res[i][j].price);
                                div.append(span3)
                            }

                        }






                    }
                })





                var kuWan = $('.kuwan')
                $('.more').on({
                    click: function () {
                        kuWan.css("height", "+=600px");
                        kwBox.css('height', "+=600px");

                    }
                })


                var zuixin = $('.new');
                var zuire = $('.hot');
                var zuixin1 = $('.new1');
                var zuire1 = $('.hot1');
                var pinlei = $('.pinlei')
                zuixin.addClass("current");
                // var pinlei = $('.pinlei');
                zuixin.on({
                    click: function () {
                        zuixin1.css("display", "block");
                        zuire1.css("display", "none");
                        // pinlei.css("display", "none");
                        zuixin.addClass("current");
                        zuire.removeClass("current");
                        pinlei.removeClass('current');
                    }
                })
                zuire.on({
                    click: function () {
                        zuixin1.css("display", "none");
                        zuire1.css('display', "block");
                        // pinlei1.css("display", "none");
                        zuire.addClass("current");
                        zuixin.removeClass("current");
                        pinlei.removeClass('current');
                    }
                })
                pinlei.on({
                    click: function () {
                        zuire1.css("display", "none");
                        zuixin1.css("display", "none");
                        pinlei.addClass("current");
                        zuire.removeClass("current");
                        zuixin.removeClass('current');
                    }
                })
            })  
        </script>
</body>

</html>